<template>
<div class="app">
    <myNavbar title="我推广的订单"></myNavbar>
       <list>
           <cell>
                  <div class="order_list_item" v-for="item in orderListapp">
        <div class="order_list_header" >
				<text class="order_list_header_title">{{item.itemList[0].name}}</text>
				<text class="order_list_header_status">{{item.statusDescr}}</text>
		</div>
     	<div class="order_list_content" v-if="item.itemList.length ==1" v-for="item1 in item.itemList" >
				<div class="order_list_content_img">
					<image  class="order_image" :src="item1.thumbnail"></image>
				</div>
				<div class="order_list_content_box">
					<div class="order_list_content_top">
						<text class="order_list_content_name">{{item1.name}}</text>
						<text class="order_list_content_price">¥{{item1.price|price}}</text>
					</div>
					<div class="order_list_content_bottom">
						<text class="order_list_content_subtitle">{{item1.spec}}</text>
						<text class="order_list_content_number">x {{item1.quantity}}</text>
					</div>
				</div>
			</div>   
       
    </div>
           </cell>
            <cell style="flex: 1;">
                <noData v-if="orderListapp.length == 0" noDataText="您还没有相关的订单"></noData>
            </cell>

         <loading @loading="onloading" :display="loadinging ? 'show' : 'hide'" class="loading">
            <text class="indicator-text">Loading ...</text>
            <loading-indicator></loading-indicator>
            </loading>
       </list>
  
    ``
</div>
</template>
<script>
import noData from '../../../components/noData/noData.vue'
import myNavbar from '../../../components/myNavbar/myNavbar.vue'
import {orderList} from '@/api/order'
 export default({
     filters:{
    price(value) {
      var toFixedNum = Number(value).toFixed(3);
      var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
      return realVal;
    },
    number(value){
      var toFixedNum = Number(value).toFixed(0);
      return toFixedNum;
    }
  },
     components: {
         myNavbar,noData
     },
     data () {
         return {
             orderListapp:[],
             loadinging:false

         }
     },
     created () {
       this.orderListclick()  
     },
     methods: {
        onloading(event) {
            this.loadinging = true
            setTimeout(() => {
              this.loadinging = false
              this.pageNum += 1
              this.orderListclick()
            }, 1000)
         },
         orderListclick(){
             orderList().then(res=>{
                 console.info(res)
                 res.data.data.forEach(item=>{
                     this.orderListapp.push(item)
                 })
             })
         },
     }
 })
</script>
 <style>
 .app{
     flex: 1;
background-color: rgba(248, 248, 248, 0.8);
 }
 .order_list_item{
     width: 730px;
      background-color: rgba(255, 255, 255, 1);
     border-radius: 16px;
     margin-top: 20px;
     padding: 25px;
     box-sizing: border-box;
     margin-left: 10px;
 }
 .order_list_header_title {
  font-size: 24px;
  font-weight: 500;
  color: rgba(26, 26, 30, 1);
  line-height: 36px;
  width: 520px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

 .order_list_header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 650px;
  height: 40px;
  /* background-color: #008c8c; */
}
.order_list_header_status {
  font-size: 24px;
  font-weight: 400;
  color: rgba(215, 38, 28, 1);
}

.order_list_content {
  width: 750px;
  display: flex;
  flex-direction: row;
  margin-top: 42rpx;
  position: relative;
}

.order_list_content_img {
  width: 170px;
  height: 170px;
  background: rgba(250, 250, 250, 1);
  border-radius: 4rpx;
  overflow: hidden;
}
.order_image{
     width: 170px;
  height: 170px; 
}
.order_list_content_box {
  display: flex;
  flex-direction: column;
  /* background-color: aquamarine; */
  margin-left: 20px;
}
.order_list_content_top {
  width: 500rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.order_list_content_name {
  font-size: 28px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  line-height: 42px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
    .loading {
        width: 750px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }

    .indicator-text {
        color: #888888;
        font-size: 22px;
        text-align: center;
		padding-top: 20px;
    }

</style>
